<template>
	<view>
		<u-navbar title="兑换券" is-fixed background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat"></u-navbar>
		<view class="order-num">
			<view class="my-exchange-cer">我的兑换券</view>
			<view class="exchange-num" @click="exchangeTo()">{{scoreInfo.score}}</view>
		</view>
		<view class="order-name">兑换记录</view>
		<scroll-view class="rankList_box" scroll-y="true" @scroll="scroll" :style="'height:' + scrollH+'rpx;'">
			<view class="rankItem" v-for="(item,index) in scoreInfo.scoreLogLst" :key="index">
				<view class="NameBox">
					<view class="userName u-line-2">{{item.memo}}</view>
					<view class="time">{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="download_box" :class='item.after>item.before?"add":"reduce"'>
					{{item.after>item.before?"+":"-"}}{{item.score}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scoreInfo: {},
				scrollH:0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			this.initData()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 450;
					// #endif
				}
			});
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			initData() {
				this.$u.api.myDuihuanquan().then(res => {
					this.scoreInfo = res.data
				})
			},
			exchangeTo() {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageA/pages/myExchangeCer/exchangeMembershipPeriod')
				} else {
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			}

		}
	}
</script>

<style lang="scss">
	.order-num {
		padding: 60rpx;
		height: 200rpx;
		width: 100%;
		background: url('https://www.yplm888.com/uploads/20240204/f76fd70c929f119b6c25a680f6d5f434.png') no-repeat;
		background-size: 750rpx;

		.my-exchange-cer {
			color: #ccc;
			font-size: 26rpx;
		}

		.exchange-num {
			color: #FE3057;
			font-size: 40rpx;
			font-weight: 600;
		}
	}

	.order-name {
		font-size: 32rpx;
		text-align: center;
	}

	.rankList_box {
		background-color: #FFFFFF;
		margin: 20rpx;
		width: 710rpx;
		min-height: 200rpx;
		bottom: 0rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
	}

	.rankItem:last-child {
		border: none;
	}

	.rankItem {
		display: flex;
		align-items: center;
		width: 700rpx;
		// height: 120rpx;
		margin: 0px auto;
		border-bottom: 1px solid #e9e9e9;
		position: relative;
	}

	.rankIndex {
		width: 90rpx;
		// height: 120rpx;
		// line-height: 120rpx;
		text-align: center;
		color: #CCCCCC;
		font-size: 20rpx;
		float: left;
	}

	.HeardBox {
		width: 80rpx;
		height: 80rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		float: left;
		margin-right: 25rpx;
		margin-left: 30rpx !important;

	}

	.HeardBox image {
		width: 100%;
		height: 100%;
	}

	.NameBox {
		padding: 20rpx 0;
		margin-left: 30rpx;
		width: 550rpx;
		font-weight: 600;
		// height: 120rpx;
		// float: left;
		// padding-top: 10rpx;
		box-sizing: border-box;
	}

	.time {
		color: #ccc;
		font-size: 22rpx;
		font-weight: normal;
	}

	.NameBox view {
		// height: 50rpx;
		// line-height: 40rpx;
	}

	.userName {
		height: 100rpx;
		width: 500rpx;
		// min-width: 90rpx;
		// margin-top: -10rpx;
		font-size: 26rpx;
		// float: left;
		margin-right: 20rpx;
	}

	.download_box {
		margin-top: 10rpx;
	}
	.add{
		color: green;
	}
	.reduce{
		color: #FE3057;
	}
</style>
